<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui"
	xmlns:f="http://java.sun.com/jsf/core">

<h:body>

	<ui:composition template="../template/template.xhtml">

		<ui:define name="content">
			<p:panel header="appointment">
				<p:dataGrid var="availability" paginator="true"
					paginatorAlwaysVisible="true" paginatorPosition="top"
					paginatorTemplate="{PreviousPageLink} {NextPageLink}"
					style="text-align:center;width:100%"
					value="#{appointmentSecondStageJSF.availabilities}" columns="3"
					rows="3">
					<f:facet name="header">
						<h:outputText value="provider schedule" />
					</f:facet>
					<h:outputText value="from " styleClass="italic smallText" />
					<h:outputText value="#{availability.start}">
						<f:convertDateTime pattern="dd-MM-yyyy HH:mm" timeZone="CET" />
					</h:outputText>
					<h:outputText value=" to " styleClass="italic smallText" />
					<h:outputText value="#{availability.end}">
						<f:convertDateTime pattern="dd-MM-yyyy HH:mm" timeZone="CET" />
					</h:outputText>
					<h:form>
						<p:dataGrid var="appointment" paginator="true"
							paginatorAlwaysVisible="false" paginatorPosition="bottom"
							paginatorTemplate="{PreviousPageLink} {NextPageLink}"
							style="text-align:center;width:100%"
							value="#{availability.appointments}" columns="1" rows="0">
							<h:outputText value="#{appointment.appointmentStart}"
								styleClass="italic smallText">
								<f:convertDateTime pattern="HH:mm" timeZone="CET" />
							</h:outputText>
							<h:outputText value=" - " styleClass="italic smallText" />
							<h:outputText value="#{appointment.appointmentEnd}"
								styleClass="italic smallText">
								<f:convertDateTime pattern="HH:mm" timeZone="CET" />
							</h:outputText>
							<h:outputText value=" #{appointment.serviceName} "
								styleClass="bold italic mediumText" />
							<div class="address">
								<h:outputText
									value="#{appointment.locationCountry}, #{appointment.locationZip} #{appointment.locationCity}, #{appointment.locationStreet}"
									styleClass="italic smallText" />
							</div>
						</p:dataGrid>
					</h:form>
				</p:dataGrid>

				<div class="margin">
					<h:form>
						<p:accordionPanel>
							<p:tab title="4. pick start time">

								<table>
									<tr>
										<td><h:outputLabel for="startTime" value="start time*" /></td>
										<td><p:calendar
												value="#{appointmentSecondStageJSF.start}" id="startTime"
												pattern="dd-MM-yyyy HH:mm" timeZone="CET" showOn="button" /></td>
									</tr>
								</table>

							</p:tab>
						</p:accordionPanel>


						<p:commandButton styleClass="bottomButton"
							action="#{appointmentSecondStageJSF.addAppointment}"
							value="5. add appointment" onstart="showLoad()" />
					</h:form>
				</div>
			</p:panel>
		</ui:define>

	</ui:composition>

</h:body>

</html>